<template>
  <div class="gzl">
    <div class="search">
      <hy-search
        class="search_box"
        ref="query"
        :searchTitle="searchTitle"
        v-model="searcher"
        :button="{btnShowBy3:true}"
        :buttonText="{btnNameBy3:'新建采购合同'}"
        :col="6"
        @search="getlist(0)"
        @clickbybtn3="GotoPg(null,null)"
      ></hy-search>
    </div>
    <el-table class="table" stripe :data="tableData" style="width: 100%" height="580">
      <el-table-column type="index" label="序号" align="center" width="70"/>
      <el-table-column prop="contractNumber" label="合同号" align="center"/>
      <el-table-column prop="supplierName" label="供应商名称" align="center"/>
      <el-table-column prop="shengxiaoTime" label="生效时间" align="center"/>
      <el-table-column prop="shixiaoTime" label="失效时间" align="center"/>
      <el-table-column  label="状态" align="center">
        <template v-slot="scope">
          {{ scope.row.status === 0 ?  '异常': '' }}
          {{ scope.row.status === 1 ?  '待审核': '' }}
          <el-button v-if="scope.row.status == 2" type="text" size="medium"
                     @click="getBOhui(scope.row.checkflowId)">驳回
          </el-button>
<!--          {{ scope.row.status === 2 ?  '驳回': '' }}-->
          {{ scope.row.status === 3 ?  '已完成': '' }}
          {{ scope.row.status === 4 ?  '关闭': '' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <!--TODO 编辑没有完成-->
          <el-button
            size="small"
            type="primary"
            @click="GotoPg(scope.row.id,null)"
            v-show="scope.row.status==3"
          >编辑
          </el-button>
          <el-button size="small" type="text" @click="GotoPg(scope.row.id,1)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pgnt">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="current"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog
      title="驳回详情"
      :visible.sync="dialogVisible_bohui"
      width="50%"
      :modal-append-to-body="false">
      <ul :data="bohuilist" class="bohuizujian">
        <li>
          <span>审核日期</span>
          <el-input v-model="bohuilist.checkTime" style="width: 70%;" disabled></el-input>
        </li>
        <li>
          <span>审核人</span>
          <el-input v-model="bohuilist.userName" style="width: 70%;" disabled></el-input>
        </li>
        <li>
          <span>驳回理由</span>
          <el-input v-model="bohuilist.bohuiReason" style="width: 70%;" disabled></el-input>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible_bohui = false">返 回</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "ProcurementContract",
  components: {},
  data() {
    return {
      dialogVisible_bohui: false,
      bohuilist:{
        bohuiReason:"",
        checkTime:"",
        userName:"",
      },
      searchTitle: [
        {
          type: "input",
          name: "customProductName",
          label: "输入搜索",
          placeholder: "请输入退货编号",
          prop: "customProductName"
        },
        {
          type: "date2",
          name: "issuanceDate",
          label: "输入时间",
          placeholder: "请选择输入时间",
          prop: "issuanceDate"
        }
      ],
      searcher: {
        customProductName: "",
        customProductNo: "",
        issuanceDate: ""
      },
      tableData: [],
      total: 1,
      current: 1,
      pagesize: 10,
    };
  },
//监听属性 类似于data概念",
  computed: {},
//监控data中的数据变化",
  watch: {},
//方法集合",
  methods: {
    getBOhui(checkflowId) {
      this.dialogVisible_bohui = true
      axios("/JX_java/procurement/getCheckFlowDetails?checkFlowId=" + checkflowId).then((res) => {
        console.log(res)
        let relse = res.data.data
        this.bohuilist = relse
        console.log(this.bohuilist)
      })
    },

    //列表页展示
    getList: function () {
      const data = {
        "beginTime": "",
        "endTime": "",
        "key": "",
        "pageNum": 0,
        "pageSize": 0,
        "type": 0
      }
      let parse = JSON.parse(localStorage.getItem("message"));
      axios.post("/JX_java/procurement/caigouhetong/getContractList?userId=" + parse.Id, data).then(res => {
        console.log(res.data.data.content, "列表数据展示")
        this.tableData = res.data.data.content;
      })
    },
    getData(page) {
      let start = "";
      let end = "";
      if (this.searcher.issuanceDate != null && this.searcher.issuanceDate != "") {
        start = this.searcher.issuanceDate[0];
        end = this.searcher.issuanceDate[1];
      }
      let obj = {
        creater: this.creater,
        key: this.searcher.customProductName ? this.searcher.customProductName : "",
        start: start,
        end: end,
        pn: page,
        PerPageSize: this.pagesize
      };
      var objs = JSON.stringify(obj);
      let the = {index: 6, jsondata: objs}
      axios.post("/apis/CEOManage.asmx/GetData", the).then(({data}) => {
        var list = eval('(' + data.d + ')');
        this.total = list.count;
        this.tableData = list.data;
      });
    },
    //跳转新增采购合同页面
    GotoPg(id, edit) {
      this.$router.push({path: "./NewContractPurchase", query: {id: id, edit: edit}});
    },
    // 分页
    handleCurrentChange(e) {
      this.getData(e - 1)
    },
    // 日期改变
    chage(e) {
      console.log(e)
      if (e) {
        this.start =
          e[0].getFullYear() +
          '-' +
          (e[0].getMonth() + 1) +
          '-' +
          e[0].getDate()
        this.end =
          e[1].getFullYear() +
          '-' +
          (e[1].getMonth() + 1) +
          '-' +
          e[1].getDate()
      } else {
        this.start = ''
        this.end = ''
      }
    },
    // 筛选
    onsubmit() {
      this.getData(0)
    }
  },
//生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {
  },
//生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
    this.getList();
  },
//生命周期 - 挂载之前",html模板未渲染
  beforeMount() {
  },
//生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {
  },
//生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {
  },
//生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {
  },
//生命周期 - 销毁之前",
  beforeDestroy() {
  },
//生命周期 - 销毁完成",
  destroyed() {
  },
//如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {
  },
}
</script>

<style lang="scss" scoped>
.bohuizujian{
  display: flex;
  flex-wrap: wrap;
  li{
    width: 33%;
    padding-top: 10px;
    text-align: center;
    span{
      display: inline-block;
      width: 25%;
    }
  }
}

.gzl {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
}

.table {
  margin-bottom: 20px;
}

.pgnt {
  text-align: center;
}

.demo-form-inline {
  display: inline-block;
}

.search {
  height: 50px;
  border-radius: 5px;
  background-color: #fff;
  padding-left: 20px;
  padding-top: 10px;
  margin-bottom: 20px;
  overflow: hidden;
}

.ebtn {
  float: right;
  margin-right: 20px;
}
</style>
